<template>
  <div>
      <ViewTitle text="常用列表" />
     <el-table
               
                  height="220"
  
                  :data="selectData1"
                  style="width: 100%"
                  :highlight-current-row='true'
                >
                   <template v-for="(item, index) in tableTitle11" >
                     <el-table-column
                  :width="item.width"
                  v-if="item.prop == 'id'"
                  :prop="item.prop"
                  :fixed="item.left"
                  :label="item.label"
                  :key="index"
                 
                >
              
                </el-table-column>
                 <el-table-column
                  :width="item.width"
                  v-if="item.prop == 'title'"
                  :prop="item.prop"
                  :fixed="item.left"
                  :label="item.label"
                  :key="index"
                 
                >
              
                </el-table-column>
                 <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'remark'"
                  :prop="item.prop"
                  :fixed="item.left"
                  :label="item.label"
                  :key="index"
                 
                >
           
                </el-table-column>
                   <el-table-column 
                   v-else-if="item.prop == 'caozuo'"
                    :prop="item.prop"
                  :fixed="item.left"
                  :label="item.label"
                  :key="index"
                  >
                     <template slot-scope="scope">
                    <span>
                 <el-button type="success" @click="rowclick(scope.row.extra_json)">查看</el-button>
    <el-button type="danger" @click="deleteCollectAdvice(scope.row.id)">删除</el-button>
                   
                    </span>
                  </template>
                  </el-table-column>
                   </template>
                </el-table>
                  <ViewTitle text="详情" />
                 <el-table
                  :data="tableData"
                  style="width: 100%"
                  border
                  height="600"

               
                >
                  <el-table-column type="selection" width="40">
                  </el-table-column>
                  <template v-for="(item, index) in tableTitle1">
                    <el-table-column
                      :width="item.width"
                      :prop="item.prop"
                      :fixed="item.left"
                      :label="item.label"
                      :key="index"
                    >
                    </el-table-column>
                  </template>
       
                </el-table>
  </div>
</template>

<script>
import ViewTitle from "../../../../forComponents/viewTitle/index.vue"
import {getCollectAdvice,deleteCollectAdvice} from "@/api/zhuyanre"
export default {
   name:"logging",
   data(){
    return {
      selectData1:[],
      tableData:[],
       tableTitle11: [
                  {
          prop: "id",
          label: "序号"
        },
        {
          prop: "title",
          label: "标题"
        },
       
        
        {
          prop: "remark",
          label: "备注"
        },
        {
          prop: "caozuo",
          label: "删除"
        },
        ],
         tableTitle1: [
        {
          prop: "id",
          left:'left',
          label: "序号",
          width: "50",
        },
        {
          prop: "start_time",
          label: "开始时间",
           left:'left',
          width: "180",
        },
   
        {
          prop: "typename",
          label: "医嘱类型",
           left:'left',
           width: "80",
        },
        {
          prop: "business_name",
          label: "医嘱内容",
          width: "180",
           left:'left',
        },
          {
          prop: "dose_unit2",
          label: "一次剂量",
          width: "100",
        },
      
          {
          prop: "usage",
          label: "用药方式",
        width: "50",
        },
         {
          prop: "used_frqu.name",
          label: "用药频次",
          width:"80",
        },
      
        {
          prop: "specification",
          label: "规格",
         width: "100",
        },
        {
          prop: "status",
          label: "医嘱状态",
       width: "80",
        },
      
        {
          prop: "number2",
          label: "用量",
          width: "50",
        },
 
        {
          prop: "is_own",
          label: "自备",
        },
  
        {
          prop: "remark",
          label: "开立备注",
       
        },

           {
          prop: "price",
          label: "单价",
        },
        {
          prop: "num",
          label: "库存数量",
        },
      ],
    }
   },
   mounted(){
    this.getCollectAdvice()
   
   },
   methods:{
     getCollectAdvice(){
       getCollectAdvice().then(res=>{
            this.selectData1=res.data
            this.tableData=this.selectData1[0].extra_json
       })
     },
     
     deleteCollectAdvice(id){
          this.$confirm("是否删除", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          }).then(() => {
             deleteCollectAdvice({id:id}).then(res=>{
                if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
         this.getCollectAdvice()
                }
       })
               
       
          });
      
     },
     
     rowclick(item){
       console.log(item)
       this.tableData=item
     }
   },
   components:{
     ViewTitle
   }
}
</script>

<style lang="scss" scoped>

  .logging-img{
    height: 200px;
    border-radius: 10px;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  .logging-text>div:nth-child(n+2){
    padding-top: 15px;
  }
  .HospitalInformation>div:nth-child(n){
    padding-top:15px;
  }
  .logging-tabs{
    display: flex;
    flex-wrap: wrap;
    div{
      margin-right: 10px;
      margin-bottom: 10px;
      border:1px solid red;
    }
  }


.rightBoder{
  border-right: 1px solid #02BF6B;
}

</style>